<template>
  <div class="main">
    <div class="login-card" align="center">
      <a-card :hoverable="true" :bordered="false">
        <div class="user-login">
          <div class="login-title" align="center">
            <div>欢迎登录</div>
          </div>
          <div class="login-form">
            <a-form :form="form">
              <a-form-item>
                <a-input
                  size="large"
                  v-decorator="['username',validatorRules.username]"
                  placeholder="请输入用户名">
                  <a-icon slot="prefix" type="user" :style="{color:'rgba(0,0,0,.25)'}"></a-icon>
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input-password
                  size="large"
                  v-decorator="['password',validatorRules.password]"
                  placeholder="请输入密码">
                  <a-icon slot="prefix" type="lock" :style="{color:'rgba(0,0,0,.25)'}"></a-icon>
                </a-input-password>
              </a-form-item>
              <a-form-item>
                <a-button style="width: 100%"
                          type="primary"
                          size="large"
                          @click="login">
                  登录
                </a-button>
              </a-form-item>
            </a-form>
          </div>
        </div>
      </a-card>
    </div>
  </div>

</template>

<script>
    import {postAction} from "../../api/manage";
    import {ACCESS_TOKEN,USER_NAME} from "../../store/mutation-types";
    import Vue from 'vue'

    export default {
        name: "Login",
        data(){
          return {
              username:"",
              password:"",
              form: this.$form.createForm(this),
              url:{
                login:"/sys/login"
              },
              validatorRules:{
                username:{initialValue:'admin',rules:[{required:true,message:'用户名不能为空!'}]},
                password:{initialValue:'123456',rules:[{required:true,message:"密码不能为空!"}]}
              }
          }
        },
        methods:{
          login(){
            let loginParams = {};
            this.form.validateFields(['username','password'],{force:true},(err,values)=>{
              if(!err){
                loginParams.username = values.username;
                loginParams.password = values.password;
                postAction(this.url.login,loginParams).then((res)=>{
                  const result = res.data;
                  this.$message.success(result.message,5);
                  if(result.success===true){
                    Vue.ls.set(ACCESS_TOKEN,result.data.token,30 * 60 * 1000); //设置有效时间为30分钟
                    Vue.ls.set(USER_NAME,result.data.username,30 * 60 * 1000);
                    this.$store.commit('SET_NAME',result.data.username);
                    this.$store.commit('SET_TOKEN',result.data.token);
                    this.$router.push('/home');
                  }
                })
              }
            })
          }
        }
    }
</script>

<style  lang="less" scoped>
.main{
  height:100%;
  background: url("~@/assets/bg/bg.gif");
  .login-card{
    padding-top: 10%;
    opacity: 0.9;
    /deep/.ant-card{
        width:18rem;
        text-align: left;
        border-radius: 0.6rem;
        height: 22rem;
        border: #000c17;
        .user-login{
          .login-title{
            width:100%;
            margin: auto;
            font-size: 1.8rem;
            font-weight: bold;
            padding: 1rem 0rem 2rem 0rem;
          }
          .login-form{
            width:100%;
          }
      }
    }
  }

}

</style>
